<template>
  <dialog
          :visible="visible"
          :title="title"
          :closable="closable"
          :mask-closable="maskClosable"
          :on-close="_handleCancel"
          :modal-width="modalWidth"
          :prefix-cls="prefixCls"
          :modal-style="modalStyle"
          :has-footer="hasFooter"
          :wrap-class-name="wrapClassName"
          :mouse-position="mousePosition">
    <slot></slot>
    <div slot="footer">
      <slot name="footer">
        <button type="button" class="btn btn-default"
                @click="_handleCancel">{{ cancelText }}</button>
        <button type="button" class="btn btn-primary"
                @click="_handleOk" :loading="confirmLoading">{{ okText }}</button>
      </slot>
    </div>
  </dialog>
</template>
<script lang="babel">
  import {props} from '../../utils'
  import Dialog from './dialog'

  let mousePosition;
  let mousePositionEventBinded;

  document.addEventListener('click', (e) => {
    mousePosition = {
      x: e.pageX,
      y: e.pageY
    }
    setTimeout(() => mousePosition = null, 20)
  }, true)

  export default {
    props: props({
      visible: false,
      confirmLoading: false,
      title: String,
      closable: true,
      onOk: () => {
      },
      onCancel: () => {
      },
      modalWidth: 520,
      okText: '确 定',
      cancelText: '取 消',
      maskClosable: true,
      prefixCls: 'ant-modal',
      modalStyle: {},
      hasFooter: true,
      wrapClassName: String
    }),

    data() {
      return {
        mousePosition: {}
      }
    },

    watch: {
      visible() {
        this.mousePosition = mousePosition;
      }
    },

    methods: {
      _handleCancel () {
        this.onCancel()
      },

      _handleOk () {
        this.onOk()
      }
    },

    components: {Dialog}
  }
</script>

<style lang="less">
  @import "../../assets/less/variables.less";

  .ant-modal {
    position: relative;
    width: auto;
    margin: 0 auto;
    top: 100px;
    padding-bottom: 24px;

    &-wrap {
      position: fixed;
      overflow: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: @zindex-modal;
      -webkit-overflow-scrolling: touch;
      outline: 0;
    }

    &-title {
      margin: 0;
      font-size: 14px;
      line-height: 21px;
      font-weight: bold;
    }

    &-content {
      position: relative;
      background-color: #fff;
      border: 0;
      border-radius: 3px;
      background-clip: padding-box;
    }

    &-close {
      cursor: pointer;
      border: 0;
      background: transparent;
      position: absolute;
      right: 18px;
      top: 16px;
      z-index: 10;
      font-weight: 700;
      line-height: 1;
      text-decoration: none;
      transition: color .3s ease;
      color: #999;
      outline: 0;

      &-x {
        display: block;
        font-style: normal;
        vertical-align: baseline;
        text-align: center;
        text-transform: none;
        text-rendering: auto;
        width: 14px;
        height: 14px;
        font-size: 14px;
        line-height: 1;

        &:before {
          content: "×";
          display: block;
          font-family: "anticon" !important;
        }
      }

      &:focus,
      &:hover {
        color: #444;
        text-decoration: none;
      }
    }

    &-header {
      padding: 14px 16px;
      border-radius: 3px 3px 0 0;
      background: #fff;
      color: #666;
      border-bottom: 1px solid #e9e9e9;
    }

    &-body {
      padding: 16px;
      font-size: 12px;
      line-height: 1.5;
    }

    &-footer {
      border-top: 1px solid #e9e9e9;
      padding: 10px 18px 10px 10px;
      text-align: right;
      border-radius: 0 0 3px 3px;
      button + button {
        margin-left: 8px;
        margin-bottom: 0;
      }
    }

    &.zoom-enter,
    &.zoom-appear {
      animation-duration: .3s;
      transform: none; // reset scale avoid mousePosition bug
      opacity: 0;
    }

    &-mask {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: #373737;
      background-color: rgba(55, 55, 55, 0.6);
      height: 100%;
      z-index: 1000;
      filter: ~"alpha(opacity=50)";

      &-hidden {
        display: none;
      }
    }

    &-open {
      overflow: hidden;
    }
  }
  .zoom-enter{
    transform: scale(0); // need this by yiminghe
    animation: antZoomIn .3s @ease-in-back;
    animation-timing-function: @ease-out-circ;
  }
  .zoom-leave{
    transform: scale(0); // need this by yiminghe
    animation: antZoomOut .3s @ease-in-back;
    animation-timing-function: @ease-out-circ;
  }

  .ant-confirm {
    .ant-modal-header {
      display: none;
    }

    .ant-modal-body {
      padding: 25px 30px;
    }

    &-body {
      .ant-confirm-title {
        color: @text-color;
        font-weight: bold;
        font-size: 14px;
      }

      .ant-confirm-content {
        margin-left: 37px;
        font-size: @font-size-base;
        color: @text-color;
        margin-top: 8px;
      }

      > .anticon {
        font-size: 24px;
        margin-right: 10px;
        padding: 0 1px;
        position: relative;
        top: 5px;
      }
    }

    .ant-confirm-btns {
      margin-top: 30px;
      float: right;

      button + button {
        margin-left: 10px;
        margin-bottom: 0;
      }
    }

    &-error &-body > .anticon {
      color: @brand-danger;
    }

    &-warning &-body > .anticon,
    &-confirm &-body > .anticon {
      color: @brand-warning;
    }

    &-info &-body > .anticon {
      color: @brand-info;
    }

    &-primary &-body > .anticon {
      color: @brand-primary;
    }

    &-success &-body > .anticon {
      color: @brand-success;
    }

    .btn{
      padding: 5px 20px;
      font-size: 13px;
      line-height: 1.4;
      border-radius: 34px;
    }
  }

</style>
